import React, { Component } from 'react'
import store from './redux/store'
import Count from './containers/Count'
import Person from './containers/Person'

// 注意：
// 多个容器共享 redux 解析：
// 1. 在 redux 文件夹下添加 actions 文件夹和 reducers 文件夹
// 2. 把对应的 action 和 reducer 放入对应文件夹下
// 3. 在核心 store 文件内引入多个创建的 reducer 文件，并在 react-redux 依赖引入 combineReducers 工具，
//    并通过该工具合并多个 reducer 为对象
// 4. 把该对象作为参数传入 createStore() 第一个参数内
//    3、4步骤合为如下代码：
//    import { createStore, applyMiddleware, combineReducers } from 'redux'
//    import countReducer from './reducers/count'
//    import personReducer from './reducers/person'
//    import thunk from 'redux-thunk'
//    const allReducers = combineReducers({
//      he: countReducer,
//      personData: personReducer
//    })
//    export default createStore(allReducers, applyMiddleware(thunk))
// 5. 在使用 state 值的地方通过 obj.key 形式引入状态
//    export default connect((state) => ({ count: state.he }), {
//      jia: createIncrementAction,
//      jian: createDecrementAction,
//      jiaAsync: createIncrementAsyncAction
//    })(Count)

export default class App extends Component {
  render() {
    return (
      <div>
        <Count store={store} />
        <hr />
        <Person />
      </div>
    )
  }
}
